/*
 * @Author: your name
 * @Date: 2021-03-22 09:00:26
 * @LastEditTime: 2021-03-25 11:09:12
 * @LastEditors: Please set LastEditors
 * @Description: In User Settings Edit
 * @FilePath: \src\js\payCar.js
 */
require(['./config'], () => {
    require(['template', 'header', 'footer', 'jquery'], (template) => {
        class yyk_payCar {
            constructor() {
                this.getlocal()
                localStorage.getItem('arr');
            }
            getlocal() {

                let data = localStorage.getItem('arr');
                // 获取本地数据，json格式转为对象
                data = JSON.parse(data)
                //console.log(data)
                $('.list_data').html(template('abc', { data }))
                this.del();
                this.add()
                this.xj_total()
                this.all()
                this.total()
                this.removeData()
            }
            // 减少
            del() {
                let _that = this;
                $('.dele').click(function () {
                    this.nextElementSibling.value--;
                    _that.xj_total()
                    if (this.nextElementSibling.value <= 1) {
                        this.nextElementSibling.value = 1;
                        _that.xj_total()
                    }
                })
            }
            // 添加
            add() {
                let _that = this;
                $('.add').click(function () {
                    this.previousElementSibling.value++;
                    _that.xj_total()
                })

            }
            // 小计
            xj_total() {
                $('input[type=text]').each(function () {
                    //console.log($(this).val())
                    $(this).parent().next().next().text(parseInt($(this).parent().prev().prev().text()) * $(this).val() + ' Q币')
                });
                this.total()
            }
            // 全选
            all() {
                // 默认，全部选中状态
                $('.check_all').prop('checked', true)
                $('.fin input').prop('checked', true)


                $('.check_all').change(function () {
                    if ($(this).prop('checked')) {
                        $('.fin input').prop('checked', true)
                    } else {
                        $('.fin input').prop('checked', false)
                    }

                })


                $('.fin input').change(function () {

                    //console.log($(this).prop('checked'),$('.check_all').prop('checked'))

                    if ($(this).prop('checked') === false) {
                        $('.check_all').prop('checked', false)
                    }
                    // 将一个JQ对象转为原生数组
                    let arr = $.makeArray($('.fin input'));
                    // 如果arr里面每个元素状态都为true, 返回true, 否则返回 false
                    let state = arr.every(function (item) {
                        return item.checked
                    })
                    if (state) {
                        $('.check_all').prop('checked', true)
                    }

                })
            }
            getTn() {
                //  获取数量、总价 并进行渲染

                // 将一个JQ对象转为原生数组
                let arr = $.makeArray($('.fin input'));
                // 对arr进行筛选，返回状态为true的元素
                let st = arr.filter(function (item) {
                    return item.checked === true
                })
                let arr_num = [], // 数量的数组
                    arr_totals = []; // 价格的数组

                $(st).each(function (i, v) {
                    arr_num.push($(v).parent().next().next().next().next().next().find('input').val());
                    arr_totals.push($(v).parent().next().next().next().next().next().next().next().text());
                    return arr_num, arr_totals
                })
                // 总数
                let num = 0;
                $(arr_num).each(function (i, is) {

                    num += is - 0; // 加0 让它自动隐式转换
                })
                $('.num').text(num)
                $('.shopCarData').text('(' + num + ')')
                // 总价
                let totals = 0;
                $(arr_totals).each(function (j, ts) {

                    totals += parseInt(ts) - 0; // 加0 让它自动隐式转换
                })
                $('.total').text(totals);
                // 渲染至页面购物车
                $('.shopCarData').text('(' + num + ')')
            }
            total() {
                let _that = this;
                // 当全选按钮为 true 时，获取 数量、总价 并进行渲染
                if ($('.check_all').prop('checked')) {
                    let arr1 = []; // 数量的数组
                    let arr2 = []; // 小计的数组

                    let arr = $('.fin input').parent().next().next().next();

                    arr.each(function (index, item) {
                        arr1.push($(item).next().next().find('input').val());
                        arr2.push($(item).next().next().next().next().text());
                        return arr1, arr2
                    })
                    // 总数
                    let num = 0;
                    $(arr1).each(function (i, is) {

                        num += is - 0; // 加0 让它自动隐式转换
                    })
                    $('.num').text(num)
                    $('.shopCarData').text('(' + num + ')')
                    // 总价
                    let totals = 0;
                    $(arr2).each(function (j, ts) {

                        totals += parseInt(ts) - 0; // 加0 让它自动隐式转换
                    })
                    $('.total').text(totals);

                    // 当勾选 全选按钮 时：
                    $('.check_all').change(function () {
                        // 判断状态为false时，重新渲染价格、数量
                        if ($(this).prop('checked') == false) {
                            $('.num').text(0);
                            $('.total').text(0);
                        } else {
                            /*
                                判断状态为true时，重新渲染价格、数量
                                如果数量没有变化，直接获取num, totals
                                如果数量有增加或减少，再次调用小计函数
                            */
                            $('.num').text(num);
                            $('.total').text(totals);
                            _that.xj_total()
                        }

                    })
                    // 渲染至页面购物车
                    $('.shopCarData').text('(' + num + ')')
                }
                // 当全选按钮为 false 时，获取 数量、总价 并进行渲染
                if ($('.check_all').prop('checked') === false) {
                    // 当全选按钮为false，单选 按钮 为true时，获取数量、总价，并进行渲染
                    this.getTn()
                    // 当全选按钮为false，单选 按钮 状态切换 时，获取数量、总价，并进行渲染
                    $('.fin input').change(function () {
                        _that.getTn()
                    })
                }
            }
            // 删除
            removeData() {
                let _this = this;
                let obj = JSON.parse(localStorage.getItem('arr'));
                $(obj).each(function (index, item) {
                    $('.del').click(function () {
                        if ($(this).parent().parent().attr('listId') == item.id) {
                            // 删除第index那一项，删除一个。
                            obj.splice(index, 1);
                            // 清空本地存储
                            localStorage.clear();
                            // 添加至本地存储
                            localStorage.setItem('arr', JSON.stringify(obj));
                            // 重新渲染
                            _this.getlocal();

                        }
                    })
                })
            }
        }
        return new yyk_payCar()
    })
})